<template>
	<view style="background-color: #f5f5f5;">

		<!-- 		<view style="width: 100%;position: fixed;top: 29px;text-align: center;z-index: 2 ;font-size: 17px;font-weight: bold;color: #FFFFFF;font-family: PingFang SC;">
				职小侠
			</view> -->

		<view :style="{backgroundImage: `url(${indexBackgroundImage})`,backgroundSize: '100% 100%',height: '200px',position: 'relative',paddingTop: '29px',}">
			<view style="margin-left: 16px;">
				<image :src="avatar_logo" mode="" style="width: 68px;height: 68px;border-radius: 34px;vertical-align: bottom"></image>
				<view style="display: inline-block;margin-left: 20px;">
					<view style="color: #FFFFFF;font-size: 17px;font-weight: 800;line-height: 24px;margin-bottom: 15px;">{{username}}</view>
					<view style="color: #FFFFFF;font-size: 15px;font-weight: 400;line-height: 21px;">{{tel | geTel}}</view>
				</view>
			</view>
		</view>
		<view class="body_box">
			<view class="">
				<view style="font-size: 24px;color: #333333;font-weight: bold;">{{account_balance||"---"}}</view>
				<view style="font-size: 13px;color: #999999;margin-top: 4px;">账户余额(元)</view>
			</view>
			<view class="title">邀请好友越拿越多</view>
			<view class="take_out" @tap="goto_balance">提现</view>
			<view style="display: flex;justify-content: flex-start;align-items:center;border-top: 1px solid #F5F5F5;margin-top: 15px;padding-top: 8px;">
				<view class="left_box" style="padding-bottom: 5px;">
					<view style="font-size: 15px;color: #333333;margin-bottom: 6px;">{{cumulative||"---"}}</view>
					<view style="font-size: 11px;color: #999999;">累计奖励(元)</view>
				</view>
				<view class="left_box" style="border-left: 1px solid #F5F5F5;padding:0 0 5px 25px">
					<view style="font-size: 15px;color: #333333;margin-bottom: 6px;">{{recent||"---"}}</view>
					<view style="font-size: 11px;color: #999999;">最近奖励(元)</view>
				</view>
			</view>
		</view>
		<view class="container" v-for="(item, index) in lists" :key="index">
			<view class="list_node" @tap="navigateJumpTo(item.navigateUrl)">
				<!-- 左侧图标 -->
				<view class="icon">
					<image :src="item.icon" style="width: 23px;height: 24px;" />
				</view>
				<!-- 右侧文字部分 -->
				<view class="info">
					<view class="text">
						{{ item.name }}
					</view>
					<view>
						<text class="lg text-gray cuIcon-right"></text>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 100%;padding: 0 16px;margin: 24px 0 28px 0;">
			<image src="https://static.cholink.com/recruit-staff/recruit-wx/share_title.png" mode="" style="width: 100%;height: 80px;"
			 @click="gotoindex"></image>
		</view>
	</view>
</template>

<script>
	const Page = require('../../utils/mtj-wx-sdk.js').Page;
	import indexBackgroundImage from "@/static/img/mine/mine_head_bg.png"
	import {
		get_account
	} from "../../api/user.js"
	export default {
		data() {
			return {
				avatar_logo: "",
				username: "",
				tel: "---",
				yesterday_active:'',
				account_balance: "",
				cumulative: "",
				recent: "",
				token: "",
				isToken: false,
				indexBackgroundImage: indexBackgroundImage,
				lists: [{
						icon: "/static/img/mine/mine.png",
						name: "我的报名",
						navigateUrl: "/pages/mine_enroll/mine_enroll"
					},
					{
						icon: "/static/img/mine/response.png",
						name: "邀请好友",
						navigateUrl: "/pages/invite/invitelist"
					},
					{
						icon: "/static/img/mine/response.png",
						name: "意见反馈",
						navigateUrl: "/pages/feedback/feedback"
					},
					// {
					// 	icon: "/static/img/mine/setting.png",
					// 	name: "设置",
					// 	navigateUrl: "/pages/settingsPage/index"
					// },
				]
			}
		},
		filters: {
			geTel(tel) {
				if (tel != undefined) {
					return tel.substring(0, 3) + "****" + tel.substr(tel.length - 4);
				}
			}
		},
		methods: {

			navigateJumpTo(val) {
				if (this.isToken) {
					uni.navigateTo({
						url: val
					});
				} else {
					uni.showModal({
						title: "职小侠提醒",
						content: '用户已登出，请重新登录！',
						success: (res) => {
							if (res.confirm) {
								// let showT = true
								uni.navigateTo({
									url: "/pages/login/index"
								});
							}
						}
					})
					return;
				}
			},
			get_mine_account() {
				if (this.isToken) {
					get_account().then(res => {
						this.account_balance = res.data.amount
						this.cumulative = res.data.cumulative
						this.recent = res.data.recent
						this.yesterday_active = res.data.yesterday_active
					})
				} else {
					uni.showModal({
						title: "羚活云人事提醒",
						content: '用户已登出，请重新登录！',
						success: (res) => {
							if (res.confirm) {
								// let showT = true
								uni.navigateTo({
									url: "/pages/login/index"
								});
							}
						}
					})
					return;
				}
			},
			goto_balance() {
				uni.navigateTo({
					// url: `/pages/mineBalance/mineBalance?account_balance=${encodeURIComponent(this.account_balance)}&cumulative=${encodeURIComponent(this.cumulative)}`
					url: `/pages/mineBalance/mineBalance?account_balance=${this.account_balance}&yesterday_active=${this.yesterday_active}&cumulative=${this.cumulative}`
				});
			},
			gotoindex() {
				uni.switchTab({
					url: "/pages/index/index"
				})
				// uni.navigateTo({
				// 	url:"/pages/login/index"
				// })

			}
		},
		onShow() {
			this.tel = uni.getStorageSync("phone").mobilephone
			this.username = uni.getStorageSync("username").data
			this.avatar_logo = uni.getStorageSync("avatar").data
			this.token = uni.getStorageSync('authorization')
			if (this.token) {
				this.isToken = true
			} else {
				this.isToken = false
			}
			this.get_mine_account()
		}
	}
</script>

<style scoped>
	.body_box {
		/* height: 138px; */
		background-color: #FFFFFF;
		position: relative;
		border-radius: 10px;
		padding: 13px 20px 0 24px;
		margin: -69px 16px 16px 16px;
	}

	.title {
		width: 108px;
		height: 24px;
		position: absolute;
		top: 0;
		right: 0;
		background: linear-gradient(86deg, #FFE284 0%, #FFD47C 100%);
		box-shadow: 0px 1px 4px rgba(206, 146, 0, 0.2);
		opacity: 0.8;
		border-radius: 0px 6px 0px 6px;
		font-size: 11px;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 24px;
		text-align: center;
		color: #FF802B;
		opacity: 1;
	}

	.take_out {
		width: 62px;
		height: 30px;
		background: rgba(14, 75, 51, 0.05);
		opacity: 1;
		border-radius: 4px;
		position: absolute;
		right: 30px;
		top: 37px;
		line-height: 30px;
		text-align: center;
		color: #07C160;
	}

	.left_box {
		flex: 1;

	}

	.container {
		display: flex;
		flex-direction: column;
		padding: 5px 16px 0;
		background-color: #ffffff;
	}

	.list_node {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #fff1f1f1;
	}

	.icon image {
		width: 23px;
		height: 24px;
	}

	.icon {
		flex: 1;
		padding: 18px 0;
	}

	.info {
		flex: 8;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		border: none;

		padding: 18px 0;
		font-weight: 400 !important;
		font-size: 17px;
		color: #333;
	}
</style>
